<template>
  <div class="ShopPage">
    <div class="title">
      页面列表
    </div>
    <div class="tabel">
      <div class="tabel-queryParam">
        <a-button>
          新建页面
        </a-button>
        <a-select default-value="jack" style="width: 120px" @change="handleChange">
          <a-select-option value="jack">
            全部状态
          </a-select-option>
          <a-select-option value="lucy">
            已发布
          </a-select-option>
          <a-select-option value="disabled">
            定时发布
          </a-select-option>
          <a-select-option value="Yiminghe">
            未发布
          </a-select-option>
        </a-select>
        <a-button>
          删除页面
        </a-button>
        <a-input-search placeholder="请输入页面名称" style="width: 200px" @search="onSearch" />
      </div>
      <s-table
        ref="table"
        size="default"
        row-key="key"
        :columns="columns"
        :data="loadData"
        :row-selection="rowSelection"
        show-pagination="auto"
      >
        <!-- <span slot="serial" slot-scope="text, record, index">
          {{ index + 1 }}
        </span> -->
        <span slot="status" slot-scope="text">
          <a-badge :status="text | statusTypeFilter" :text="text | statusFilter" />
        </span>
        <span slot="description" slot-scope="text">
          <ellipsis :length="4" tooltip>{{ text }}</ellipsis>
        </span>

        <span slot="action" slot-scope="text, record">
          <template>
            <a @click="handleEdit(record)">配置</a>
            <a-divider type="vertical" />
            <a @click="handleSub(record)">订阅报警</a>
          </template>
        </span>
      </s-table>
    </div>
  </div>
</template>

<script>
// import moment from 'moment'
import { getRoleList, getServiceList } from '@/api/manage'
import { STable, Ellipsis } from '@/components'
const columns = [
  // {
  //   title: '#',
  //   scopedSlots: { customRender: 'serial' }
  // },
  {
    title: '页面名称',
    dataIndex: 'no'
  },
  {
    title: '页面状态',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '最后保存时间',
    dataIndex: 'updatedAt'
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '150px',
    scopedSlots: { customRender: 'action' }
  }
]
const statusMap = {
  0: {
    status: 'default',
    text: '关闭'
  },
  1: {
    status: 'processing',
    text: '运行中'
  },
  2: {
    status: 'success',
    text: '已上线'
  },
  3: {
    status: 'error',
    text: '异常'
  }
}

export default {
  name: 'ShopPage',
  components: {
    STable, Ellipsis
  },
  filters: {
    statusFilter(type) {
      return statusMap[type].text
    },
    statusTypeFilter(type) {
      return statusMap[type].status
    }
  },
  data() {
    return {
      // create model
      columns,
      visible: false,
      confirmLoading: false,
      mdl: null,
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        console.log('loadData request parameters:', requestParameters)
        return getServiceList(requestParameters)
          .then(res => {
            return res.result
          })
      },
      selectedRowKeys: [],
      selectedRows: []
    }
  },
  computed: {
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange
      }
    },
    key() {
      return this.$route.path
    }
  },
  created() {
    getRoleList({ t: new Date() })
  },
  methods: {
    handleChange(value) {
      this.$set(this.queryParam, 'type', value)
      console.log(`selected ${value}`)
    },
    onSearch(value) {
      this.$set(this.queryParam, 'Search', value)
      console.log(`selected ${value}`)
    },
    handleAdd() {
      this.mdl = null
      this.visible = true
    },
    handleEdit(record) {
      this.visible = true
      this.mdl = { ...record }
    },
    handleCancel() {
      this.visible = false

      const form = this.$refs.createModal.form
      form.resetFields() // 清理表单数据（可不做）
    },
    handleSub(record) {
      if (record.status !== 0) {
        this.$message.info(`${record.no} 订阅成功`)
      } else {
        this.$message.error(`${record.no} 订阅失败，规则已关闭`)
      }
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    }
  }
}
</script>
<style lang="less" scoped>
.ShopPage{
  .title{
    display: flex;
    align-items: center;
    height: 66px;
    width: 100%;
  }
  .tabel-queryParam{
    padding: 0 0 15px 0;
    display: flex;
    align-items: center;
    .ant-btn{
      margin: 0 10px;
      &:first-child{
        margin-left: 0;
      }
    }
    .ant-input-search{
      margin-left: auto;
    }
  }
}

</style>
